<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!-- 新增 -->
      <div style="display: inline-block;margin: 0px 2px;">
        <el-button
          v-permission="['ADMIN','ACT_MODEL_ALL','ACT_MODEL_CREATE']"
          class="filter-item"
          size="mini"
          type="primary"
          icon="el-icon-plus"
          @click="add">新增
        </el-button>
      </div>
      <!-- 多选删除 -->
      <div v-permission="['ADMIN','ACT_MODEL_ALL','ACT_MODEL_DELETE_ALL']"
           style="display: inline-block;margin: 0px 2px;">
        <el-button
          :loading="delAllLoading"
          :disabled="data.length === 0 || $refs.table.selection.length === 0"
          class="filter-item"
          size="mini"
          type="danger"
          icon="el-icon-delete"
          @click="open">删除
        </el-button>
      </div>
    </div>
    <!--表单组件-->
    <eForm ref="form" :is-add="isAdd"/>
    <my-dialog ref="myDialog" :src="src" :title="title"/>
    <!--表格渲染-->
    <el-table v-loading="loading" ref="table" :data="data" size="small" style="width: 100%;" border>
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="category" label="流程分类"/>
      <el-table-column prop="key" label="模型标识"/>
      <el-table-column prop="name" label="模型名称"/>
      <el-table-column prop="version" label="版本号"/>
      <el-table-column prop="createTime" label="创建时间">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="lastUpdateTime" label="最后更新时间">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.lastUpdateTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="100%" width="350">
        <template slot-scope="scope">
          <el-button v-permission="['ADMIN']" size="mini" type="text" @click="onlineEdit(scope.row.id)">[在线设计]
          </el-button>
          <el-button v-permission="['ADMIN','ACT_MODEL_ALL','ACT_MODEL_DEPLOY']" size="mini" type="text"
                     @click="deployModel(scope.row.id)">[部署]
          </el-button>
          <el-button v-permission="['ADMIN','ACT_MODEL_ALL','ACT_MODEL_EXPORT']" size="mini" type="text"
                     @click="exportModelXml(scope.row.id,scope.row.name)">[导出]
          </el-button>
          <el-button v-permission="['ADMIN','ACT_MODEL_ALL','ACT_MODEL_DELETE']" size="mini" type="text"
                     @click="delModel(scope.row.id)">[删除]
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-pagination
      :total="total"
      :current-page="page + 1"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"/>
  </div>
</template>

<script>
  import checkPermission from '@/utils/permission'
  import initData from '@/mixins/initData'
  import { parseTime } from '@/utils/index'
  import { mapGetters } from 'vuex'
  import eForm from './form'
  import myDialog from '@/components/MyDialog'
  import { deploy, exportModel, del, delAll } from '@/api/framework/flow/flowModel'

  export default {
    components: { eForm, myDialog },
    mixins: [initData],
    data() {
      return {
        loading: false,
        delAllLoading: false,
        src: '',
        title: ''
      }
    },
    computed: {
      ...mapGetters([
        'baseApi'
      ])
    },
    created() {
      this.$nextTick(() => {
        this.init()
      })
    },
    methods: {
      checkPermission,
      parseTime,
      beforeInit() {
        this.url = 'flow/selectModel'
        const sort = 'id,desc'
        this.params = { page: this.page, size: this.size, sort: sort }
        const query = this.query
        const type = query.type
        const value = query.value
        if (type && value) {
          this.params[type] = value
        }
        return true
      },
      add() {
        this.isAdd = true
        this.$refs.form.dialog = true
      },
      onlineEdit(id) {
        this.src = this.baseApi + '/modeler.html?modelId=' + id
        this.title = '在线设计'
        this.$refs.myDialog.dialog = true
      },
      deployModel(modelId) {
        this.loading = true
        deploy(modelId).then(res => {
          this.loading = false
          this.$notify({
            title: '部署成功',
            type: 'success',
            duration: 2500
          })
        }).catch(err => {
          this.loading = false
          console.log(err.response.data.message)
        })
      },
      exportModelXml(modelId, name) {
        this.loading = true
        exportModel(modelId).then(res => {
          this.loading = false
          this.download(res, name)
        }).catch(err => {
          this.loading = false
          console.log(err)
        })
      },
      download(data, name) {
        if (!data) {
          return
        }
        const url = window.URL.createObjectURL(new Blob([data]))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', name + '.xml')
        document.body.appendChild(link)
        link.click()
      },
      delModel(modelId) {
        this.loading = true
        del(modelId).then(res => {
          this.loading = false
          this.$notify({
            title: '删除成功',
            type: 'success',
            duration: 2500
          })
          this.dleChangePage()
          this.init()
        }).catch(err => {
          this.loading = false
          console.log(err)
        })
      },
      doDelete() {
        this.delAllLoading = true
        const data = this.$refs.table.selection
        const ids = []
        for (let i = 0; i < data.length; i++) {
          ids.push(data[i].id)
        }
        delAll(ids).then(res => {
          this.delAllLoading = false
          this.dleChangePage(ids.length)
          this.init()
          this.$notify({
            title: '删除成功',
            type: 'success',
            duration: 2500
          })
        }).catch(err => {
          this.delAllLoading = false
          console.log(err.response.data.message)
        })
      },
      open() {
        this.$confirm('你确定删除选中的数据吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.doDelete()
        })
      }
    }
  }
</script>

<style scoped>

</style>
